<template>
  <div class="activityPreference theColorFigure relative">
    <homeHeader></homeHeader>
    <div class="activitys indexJust">
      <div class="activityList headerTopMain scrollBar">
        <div class="activityListBox">
          <ul class="clearFiex">
            <li class="actListItem floatLeft" v-for="actListItem in activitiesPreData"
                @click="actListEvent(actListItem.id)">
              <a href="javascript:void(0);">
                <img :src="actListItem.coverPic" alt="">
                <div class="actItemInfo clearFiex">
                  <div class="left floatLeft">
                    <p>{{actListItem.title}}</p>
                    <p>
                      活动时间：{{_Util.formatDateTime(actListItem.startTime,0,'/')}}～{{_Util.formatDateTime(actListItem.endTime,0,'/')}}</p>
                  </div>
                  <div class="right floatRight" :class="{on:actListItem.status=='1'}">
                    {{actListItem.status=='1'?'进行中':'已结束'}}
                  </div>
                </div>
              </a>
            </li>
          </ul>
          <div class="annoucementPageTotal">
            <Page :total="pageTotal" :page-size="submission.pageSize" :current="submission.pageNum"
                  @on-change="changePage"></Page>
          </div>
        </div>
      </div>
    </div>
    <div class="activityDetail" v-show="isShowActDetail">
      <div class="activityDetailBox absmiddle">
        <div class="actDetailTitle clearFiex">
          <div class="left floatLeft">
            <p>{{actTitle}}</p>
            <p>活动时间：{{_Util.formatDateTime(actStartTime,0,'/')}}～{{_Util.formatDateTime(actEndTime,0,'/')}}</p>
          </div>
          <div class="right floatRight" @click="closeActDetail">关闭</div>
        </div>
        <div class="actDetailInfo scrollBar" v-html="actContent"></div>
      </div>
    </div>
    <homeFooter class="footerFixed"></homeFooter>
  </div>
</template>

<script>
  import './main.scss'
  import homeHeader from '../../components/lotteryColor/header/index';
  import homeFooter from '../../components/footer/index';
  import $ from 'jquery';
  export default {
    data() {
      return {
        activitiesPreData: [],//活动列表数据
        actStartTime: '',
        actEndTime: '',
        actTitle: '',
        actContent: '',
        pageTotal: 1,
        isShowActDetail: false,//是否显示活动详情
        submission: {
          pageNum: 1,
          pageSize: 4,
        },
      }
    },
    activated() {
      this.init();
    },
    mounted() {
    },
    methods: {
      init() {
        let that = this;
        that.initPage();
        that.initData();
      },
      //初始化数据
      initData() {
        let that = this;
        that._Util.post(that, that._Api.POST_GET_ACTIVE_BY_PAGE, that.submission, (data) => {
          that.activitiesPreData = data.result;
          that.pageTotal = data.total;
        });
      },
      //初始化页面
      initPage() {
        this.actStartTime = '';
        this.actEndTime = '';
        this.actTitle = '';
        this.actContent = '';
        this.submission.pageNum = 1;
        let height = $(window).height();
        $(".activityPreference").innerHeight(height);
      },
      //查看活动详情
      actListEvent(id) {
        this.isShowActDetail = true;
        setTimeout(() => {
          $(".actDetailInfo").height($(".activityDetailBox").height() - $(".actDetailTitle").height() - 20);
        }, 300)
        this.getActDetailData(id);
      },
      //获取详情数据
      getActDetailData(id) {
        let that = this;
        that.activitiesPreData.forEach((v, i) => {
          if (v.id == id) {
            that.actStartTime = v.startTime || '';
            that.actEndTime = v.endTime || '';
            that.actTitle = v.title || '';
            that.actContent = v.detail || '';
          }
        });
      },
      //关闭活动详情
      closeActDetail() {
        this.isShowActDetail = false;
      },
      changePage(val) {
        this.submission.pageNum = val;
      }
    },
    components: {
      homeHeader,
      homeFooter,
    },
    watch:{
      '$route.query.activityId'(val){
//        this.actListEvent(val);
      },
      'activitiesPreData'(){
        if(this.$route.query.activityId){
          this.actListEvent(this.$route.query.activityId);
        }
      }
    }
  }
</script>
